<template>
  <view class="reasonspop">
        <u-popup :show="show" round="16"  @close="closepop">
            <view class="reasonsTitle">拒绝理由</view>
            <view class="reasonsForRefusal">
              <up-textarea v-model="reasonsValue" placeholder="请输入内容" :maxlength="-1" :cursor-spacing="108"></up-textarea>
            </view>
            <view class="btn">
            <button class="cancel button" @tap="closepop" >取消</button>
            <button class="confirm button" @click="affirm">确定</button>
            </view>
        </u-popup>
      </view>
</template>

<script setup>
import {  ref,watch  } from "vue";
const emits = defineEmits(['cancel','affirm']);
const props = defineProps({
  show: {
      type: Boolean,
      default: false
    },
})
watch(() => props.show,(newVal, oldVal) => {
    if(newVal == true){
      reasonsValue.value = ''
    }
  
  }
)
//点击事件
function closepop(){
  emits('cancel', false)
  return;
  }
  const reasonsValue = ref()
  function affirm(){
    emits('affirm',reasonsValue.value)
    return;
  }

</script>
<style scoped lang="scss">

.reasonsTitle{
height: 90rpx;
display: flex;
justify-content: center;
align-items: center;
font-family: PingFangSC;
color: $uni-text-color;
font-weight: $uni-font-weight;
font-size: 40rpx;
}
.reasonsForRefusal{
height: 466rpx;
background: #F9FAFF;
}
.btn{
  padding-bottom: 100rpx;
		padding-bottom: env(safe-area-inset-bottom) !important;		
height: 120rpx;
background: $uni-bg-color;
display: flex;
justify-content: space-around;
align-items: center;
.button{
  height: 90rpx;
  width: 240rpx;
  border-radius:50rpx;

  font-weight: $uni-font-weight;
  font-size: 34rpx;
}
.cancel{
 border: 1px solid $uni-color-primary;
 color: $uni-color-primary
}
.confirm{
  color: $uni-bg-color;
  background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%);
}

}

</style>

